<template>
    <div class="personalization">
        <div class="mdc-layout-grid">
            <div class="personalization-heading">
                <h4 class="title-xs">Pick up where you left off</h4>
                <div class="tooltip-container"><a class="link">Personalized<svg data-name="Layer 1"
                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                            <g data-name="Info - 16">
                                <path
                                    d="M8,1A7,7,0,1,1,1,8,7,7,0,0,1,8,1M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM7,4A1,1,0,1,0,8,3,1,1,0,0,0,7,4Zm2.5,8H8.69V6.69A.68.68,0,0,0,8.19,6,.41.41,0,0,0,8,6H6.5a.5.5,0,0,0,0,1h.81v5.31a.68.68,0,0,0,.5.65A.41.41,0,0,0,8,13H9.5a.5.5,0,0,0,0-1Z">
                                </path>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="personalization-content">
                <a class="cardlink-container">
                    <el-image fit="cover" :src="imgUrl" class="el-image-class"></el-image>
                    <div class="description">
                        <h6 class="eyebrow">Article</h6>
                        <p class="article-elipsis ptags-small">Innovation to Solve the Healthcare Challenges of Today,
                            Tomorrow, and Well Into the Future: RSNA 2023</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>
<script setup>
let imgUrl = ref(new URL(`@/assets/home/IMG_0041.jpg`, import.meta.url).href)
</script>
<style lang="scss" scoped>
.personalization {
    background-color: #ffffff;
}

.personalization-heading {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 48px;
}

.tooltip-container {
    position: relative;
    display: inline-block;

    .link {
        color: var(--interaction);
        display: flex;
        align-items: center;
        font-size: .8rem;
        line-height: 21px;
        letter-spacing: 0;
        font-weight: 400;

        svg {
            width: 16px;
            height: 16px;
            fill: var(--interaction);
            margin-left: 4px;
            vertical-align: middle;
        }
    }
}

.personalization-content {
    .cardlink-container {
        display: flex;
        align-items: center;

        .el-image-class {
            margin-bottom: 12px;
            margin-right: 12px;
            width: 160px;
            height: 120px;
            vertical-align: middle;
        }

        .description {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .eyebrow {
                font-size: 0.9rem;
                line-height: 1.3rem;
                font-weight: 600;
                text-transform: none !important;
                letter-spacing: 2px;
                color: #222222;
            }

            .article-elipsis {
                margin-top: 8px;
                margin-bottom: 4px;
            }
        }
    }
}

@media (min-width: 600px) and (max-width: 1024px) {
    .personalization-heading {
        margin-top: 24px;
        margin-bottom: 32px;
    }
}

@media (max-width: 600px) {
    .personalization-heading {
        margin: 24px;
    }
}</style>